<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>井字游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .game-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 300px;
        }
        h1 {
            margin-bottom: 20px;
        }
        .board {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            gap: 5px;
            margin-bottom: 20px;
        }
        .cell {
            width: 100px;
            height: 100px;
            background-color: #ddd;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 48px;
            font-weight: bold;
            cursor: pointer;
            user-select: none;
        }
        .cell.disabled {
            pointer-events: none;
            background-color: #ccc;
        }
        .status {
            font-size: 18px;
            margin-bottom: 10px;
        }
        .reset-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .reset-button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>井字游戏</h1>
        <div class="board" id="board"></div>
        <div class="status" id="status">轮到 X</div>
        <button class="reset-button" id="reset-button">重新开始</button>
    </div>

    <script>
        const board = document.getElementById('board');
        const status = document.getElementById('status');
        const resetButton = document.getElementById('reset-button');

        let currentPlayer = 'X';
        let gameBoard = ['', '', '', '', '', '', '', '', ''];
        let gameOver = false;

        function createBoard() {
            board.innerHTML = '';
            for (let i = 0; i < 9; i++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.dataset.index = i;
                cell.addEventListener('click', handleCellClick);
                board.appendChild(cell);
            }
        }

        function handleCellClick(e) {
            if (gameOver || e.target.textContent !== '') return;

            const index = parseInt(e.target.dataset.index);
            gameBoard[index] = currentPlayer;
            e.target.textContent = currentPlayer;
            e.target.classList.add('disabled');

            if (checkWin()) {
                status.textContent = `玩家 ${currentPlayer} 获胜！`;
                gameOver = true;
            } else if (gameBoard.every(cell => cell !== '')) {
                status.textContent = '平局！';
                gameOver = true;
            } else {
                currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
                status.textContent = `轮到 ${currentPlayer}`;
            }
        }

        function checkWin() {
            const winPatterns = [
                [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
                [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
                [0, 4, 8], [2, 4, 6]             // Diagonals
            ];

            return winPatterns.some(pattern => {
                return pattern.every(index => gameBoard[index] === currentPlayer);
            });
        }

        function resetGame() {
            currentPlayer = 'X';
            gameBoard = ['', '', '', '', '', '', '', '', ''];
            gameOver = false;
            status.textContent = `轮到 ${currentPlayer}`;
            createBoard();
        }

        createBoard();
        resetButton.addEventListener('click', resetGame);
    </script>
</body>
</html>